<template>
  <div class="bindPhone">
    <div class="tit">
      关联手机号
      <span>関連携帯番号</span>
    </div>
    <div class="form">
      <form class="mui-input-group">
					<div class="mui-input-row">
						<label>手机号</label>
						<input type="text" placeholder="">
            <button @click.prevent="sendCode" :class="{sendCode:true,active:form.active}">{{form.sendNane}}</button>
					</div>
					<div class="mui-input-row code">
						<label>验证码</label>
						<input type="text" class="mui-input-clear" placeholder="" data-input-clear="5"><span class="mui-icon mui-icon-clear mui-hidden"></span>
					</div>
				</form>
    </div>
    <button>提交申请</button>
  </div>
</template>

<script>
import { Toast } from "mint-ui"
export default {

  data () {
    return {
      form:{
        sendNane:'发送验证码',
        active:false
      },
      isSend:true,
      time:5
    }
  },

  methods: {
    sendCode(){
      if(this.isSend){
        this.isSend = false
        Toast('发送成功')
        this.form.active = true

        var intId = setInterval(()=>{

          this.form.sendNane = '('+(--this.time)+'s)后再试'
          if(this.time==0){
            clearInterval(intId)
            setTimeout(()=>{
              this.isSend = true
              this.form.active = false
              this.time = 60
              this.form.sendNane = '发送验证码'
            })
            
          }
        },1000)
        
        
        
      }
      
    }
  },

  created () {
  }
}
</script>

<style lang='less' scoped>
.mui-input-group:before,.mui-input-group:after,
.mui-input-group:before,.mui-input-group:after,
.mui-input-group .code:after
{
  height:0;
}
.mui-input-group .mui-input-row:after{
  left:0;
}
.mui-input-row label{
  padding:22px 28px;
}
.mui-input-row label{
  font-size: 14px;
  color: #333;
}
.mui-input-group .mui-input-row{
  height:55px;
  input{
    margin-top: 10px;
  }
  .sendCode{
    width:86px;
    height:32px;
    background: #FDDF00;
    border-radius: 6px;
    position: absolute;
    right:10px;
    top:10px;
    font-size: 12px;
    color: #333;
    border: none;
    box-shadow: none;
  }
  .sendCode.active{
    background: #ccc;
    color: #fff;
  }
}
.bindPhone{
  width:100%;
  height:100%;
  position: relative;
  .form{
    background: #FFFFFF;
    border: 1px solid #E7E7E7;
    box-shadow: 1px 8px 18px 0 rgba(0,0,0,0.03);
    border-radius: 15px;
    margin-top: 20px;
    font-size: 14px;
    color: #999999;
    overflow: hidden;
  }
  button{
    background: #FFFFFF;
    border: 1px solid #E7E7E7;
    box-shadow: 1px 8px 18px 0 rgba(0,0,0,0.03);
    border-radius: 15px;
    width:100%;
    height:45px;
    font-size: 16px;
    color: rgba(51,51,51,0.85);
    position: absolute;
    bottom:40px;
  }
}

</style>
